<template>
    <div>
      <h2>store</h2>
      <button @click="incr">incr</button>
      <button @click="decr">decr</button>
      <p>点击了 {{n}} 次</p>
      <p>点击了 {{$store.state.n}} 次</p>
      <p>$store.state.n * 2 {{n2}} </p>
      <p>n * n {{nn}} </p>
      <p>nn2 -- {{nn2}} </p>
      <input v-model="staten" />
      <button @click="incrstaten">incr</button>
      <button @click="decrstaten">decr</button>
      <p> staten -- {{$store.state.num}} </p>
      <div @click="onebtn" @dblclick="towbtn" style="width: 200px;height: 200px;border: 1px solid red;line-height: 200px;text-align: center">
        <span>双击</span>
      </div>

    </div>
</template>

<script>
  import {mapMutations} from 'vuex'
    export default {
        name: "Store",
        data(){
          return {
            n: 0,
            staten:''
          }
        },
      computed:{
        n2(){
          return this.$store.state.n * 2
        },
        nn(){
          return this.$store.getters.nsquare
        },
        nn2: () => ("aaaaa")
      },
      methods:{
        incrstaten(){
          this.$store.commit("incrnum",this.staten)
          console.log(this.$store.state.num);
        },
        decrstaten(){
          this.$store.commit("decrnum",this.staten)
        } ,
        incr(){
          this.n++
          this.$store.commit('incr')
        },
        decr(){
          this.n--
          this.$store.commit('decr')
        },
        onebtn(){
          console.log("单击了")
        },
        towbtn(){
          console.log("双击了")
        }
      }
    }
</script>

<style scoped>

</style>
